<template>
  <div id="app">
    <h1>购物车：</h1>
    <p>
      {{data.type}} 
      单价：{{data.dan}} 
      <button @click="sub">-</button>
      {{data.qu}}
      <button @click="add">+</button>
    </p>
    <h3>总价：{{zong}}</h3>
    <button v-if="but.bu">{{but.str}}</button>
    <button v-if="wei.bu">{{wei.str}}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data:{type:'苹果',dan:1.2,qu: 0,},
      but: {bu:true,str:"支付"},
      wei: {bu:false,str:"微信支付8折"},
    };
  },
  computed: {
    zong() {
      return this.data.qu * this.data.dan;
    },
  },
  methods:{
    add(){
      this.data.qu++
    },
    sub(){
      if(this.data.qu>0){
        this.data.qu--
      }
    }
  },
  watch:{
    'data.qu':function(i){
      if(i>4&&i<=9){
        this.wei={bu:true,str:"微信支付8折"}
      }else if(i>9){
        this.wei={bu:true,str:"微信支付5折"}
        this.but={bu:true,str:"支付5折"}
      }else{
        this.wei={bu:false,str:"微信支付8折"}
      }
    }
  }
};
</script>

<style>
* {
  text-align: center;
}
</style>
